<template>
	<div class="system-menu-container">
		<div class="">
			<el-card shadow="hover" class="layout-padding-auto">
				<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
					<el-table-column type="index" label="序号" width="60" />
					<el-table-column prop="phone" label="电话号码" show-overflow-tooltip></el-table-column>
					<el-table-column prop="begin_time_str" label="开始时间" show-overflow-tooltip></el-table-column>
					<el-table-column prop="end_time_str" label="结束时间" show-overflow-tooltip></el-table-column>

					<el-table-column prop="call_exec_time" label="通话时长" show-overflow-tooltip></el-table-column>
					<el-table-column prop="content" label="类型" show-overflow-tooltip>
						<template #default="scope">
							<div v-if="scope.row.type == 1">来电</div>
							<div v-if="scope.row.type == 2">去电</div>
						</template>
					</el-table-column>

					<el-table-column prop="content" label="状态" show-overflow-tooltip>
						<template #default="scope">
							<div v-if="scope.row.status > 0">接通</div>
							<div v-else>未接通</div>
						</template>
					</el-table-column>
					<el-table-column label="标记" show-overflow-tooltip>
						<template #default="scope">
							{{ scope.row.is_patient_sign ? '已标记' : '未标记' }}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="100">
						<template #default="scope">
							<el-button size="small" text type="primary" @click="show(scope.$index)">查看</el-button>
							<el-button size="small" text type="primary" @click="signPatient(scope.row)">标记</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					@size-change="onHandleSizeChange"
					@current-change="onHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[10, 20, 30]"
					v-model:current-page="state.tableData.param.pageNum"
					background
					v-model:page-size="state.tableData.param.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="state.tableData.total"
				>
				</el-pagination>
			</el-card>
		</div>

		<el-dialog
			v-if="state.form"
			v-model="state.dialogFormVisible"
			title="对话详情"
			width="900px"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			@close="close"
		>
			<div class="dialog-header">
				<el-table :data="[state.form]" border header-cell-class-name="bg-color">
					<el-table-column type="index" label="序号" width="70" />
					<el-table-column prop="phone" label="电话号码" show-overflow-tooltip></el-table-column>
					<el-table-column prop="begin_time_str" label="开时时间" show-overflow-tooltip></el-table-column>
					<el-table-column prop="end_time_str" label="结束时间" show-overflow-tooltip></el-table-column>

					<el-table-column prop="call_exec_time" label="通话时长" show-overflow-tooltip></el-table-column>
					<el-table-column prop="content" label="类型" show-overflow-tooltip>
						<template #default="scope">
							<div v-if="scope.row.type == 1">来电</div>
							<div v-if="scope.row.type == 2">去电</div>
						</template>
					</el-table-column>

					<el-table-column prop="content" label="状态" show-overflow-tooltip>
						<template #default="scope">
							<div v-if="scope.row.status > 0">接通</div>
							<div v-else>未接通</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-tabs v-model="state.active" type="card" style="margin-top: 15px">
				<el-tab-pane label="文本转写结果" name="first">
					<div style="height: 50vh; overflow-y: scroll">
						{{ state.form.lvsr_data }}
					</div>
				</el-tab-pane>
				<el-tab-pane label="角色分离结果" name="second">
					<ul>
						<li v-for="item in state.form.separateArr">
							<span :class="'speaker_' + item.speaker">{{ item.speaker_name }}</span>
							<span>{{ item.txt }}</span>
						</li>
					</ul>
				</el-tab-pane>
			</el-tabs>

			<div slot="footer" class="dialog-footer">
				<AudioPlayer ref="audioPlayerRef" v-if="state.form.voice_url" :fileurl="state.form.voice_url"></AudioPlayer>
			</div>
		</el-dialog>

		<SignPatientDialog ref="signPatientDialogRef" @refresh="getTableData()"></SignPatientDialog>
	</div>
</template>

<script setup name="systemDic">
import { ElMessageBox, ElMessage } from 'element-plus';
import { RecordLogApi } from '/@/api/record/log';
import { formatDuration, formatTimestamp } from '/@/utils/timeUtil';
import AudioPlayer from '/@/components/voice/AudioPlayer.vue';

import { useRouter } from 'vue-router';
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
const SignPatientDialog = defineAsyncComponent(() => import('./signPatient.vue'));
const router = useRouter();
const route = useRoute();
const audioPlayerRef = ref(null);
const signPatientDialogRef = ref(null);

// 定义变量内容
const state = reactive({
	dialogFormVisible: false,
	form: {},
	active: 'first',
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
			name: '',
			status: '',
		},
	},
});

// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	const param = {
		page_index: state.tableData.param.pageNum,
		page_size: state.tableData.param.pageSize,
		patient_id: route.query.id,
	};
	RecordLogApi()
		.getPatientArtificialDetail(param)
		.then((res) => {
			state.tableData.total = res.data.total;
			state.tableData.data = res.data.data;
			state.tableData.loading = false;
			state.tableData.data.forEach((item) => {
				if (item.begin_time > 0) {
					item.begin_time_str = formatTimestamp(item.begin_time * 1000);
				} else {
					item.begin_time_str = '暂无';
				}

				if (item.end_time > 0) {
					item.end_time_str = formatTimestamp(item.end_time * 1000);
				} else {
					item.end_time_str = '暂无';
				}
				item.call_exec_time = formatDuration(item.end_time - item.begin_time);
			});
		});
};

const show = async (index) => {
	state.form = state.tableData.data[index];
	await RecordLogApi()
		.getPatientArtificialDetailById({ conversation_id: state.form.conversation_id })
		.then((item) => {
			state.form.voice_url = item.data.voice_url;
			if (item.data.transfer_detail) {
				var message = JSON.parse(item.data.transfer_detail);
				if (message.lvsr_data && message.lvsr_data.length > 0) {
					state.form.lvsr_data = message.lvsr_data
						.map((item) => {
							console.log(item);
							return item.txt;
						})
						.join('。');
				} else {
					message.lvsr_data = '';
				}
			} else {
				state.form.lvsr_data = '';
			}
			if (item.data.transfer_separate) {
				var separateArr = JSON.parse(item.data.transfer_separate);
				if (separateArr.separate && separateArr.separate.length > 0) {
					separateArr.separate.forEach((item) => {
						item.speaker_name = '角色' + Math.abs(item.speaker) + ': ';
					});
					state.form.separateArr = separateArr.separate;
				}
			} else {
				state.form.separateArr = [];
			}
		});
	console.log(state.form);
	state.dialogFormVisible = true;
};

const signPatient = (row) => {
	signPatientDialogRef.value.openDialog({ rel_type: 2, rel_id: row.conversation_id, patient_id: row.patient_id });
};

const close = () => {
	state.form = {};
	state.dialogFormVisible = false;
};

const play = (start) => {
	var startTime = Math.floor(start);
	audioPlayerRef.value.turn(startTime);
};
// 分页改变
const onHandleSizeChange = (val) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped>
:deep() .bg-color {
	background: #47a1fc !important;
	color: white !important;
}

li {
	margin-bottom: 15px;
	list-style: none;
}

.self {
	text-align: right;
	color: black !important;
}
.speaker_-2 {
	color: #47a1fc;
}
.speaker_-1 {
	color: #ff9900;
}
.speaker_-3 {
	color: red;
}
</style>
